<script setup lang="ts">
import MessageBox from '@/components/MessageBox'

function onShowMsg() {
  MessageBox.alert({
    title: 'title',
    content: '内容',
    callback: () => {
      console.log('remove')
    }
  })
}
</script>

<template>
  <div class="container">
    <button @click="onShowMsg">click me</button>
  </div>
</template>

<style scoped>
.container {
  padding: 150px;
  text-align: center;
}
button {
  color: #fff;
  font-size: 18px;
  padding: 12px 18px;
  border-radius: 5px;
  background: #e61e1e;
  cursor: pointer;
  border: none;
  outline: none;
  box-shadow: 0 5px 0 0 #962727;
}
button:active {
  transform: translate(0, 3px);
  box-shadow: 0 2px 0 0 #962727;
}
</style>
